<template>
  <div>
    <el-container>
      <!-- <el-aside width="300px">
        <el-card :style="`height:${height}px`" class="box-card">
          <div slot="header" class="clearfix">
            <span>功能菜单</span>
          </div>
          <leftTree treeType="2"></leftTree>
        </el-card>
      </el-aside>-->
      <el-main>
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>菜单信息表</span>
          </div>
          <el-form size="mini" :inline="true" :model="formInline" class="demo-form-inline">
            <!-- <el-form-item label="菜单名称">
              <el-input v-model="formInline.name" placeholder="菜单名称"></el-input>
            </el-form-item>-->
            <el-form-item>
              <!-- <el-button type="primary" @click="search">查询</el-button> -->
              <el-button type="primary" @click="addDiag">新增</el-button>
            </el-form-item>
          </el-form>
          <el-table
            :data="tableData"
            style="width: 100%"
            row-key="pid"
            border
            lazy
            :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
          >
            <el-table-column prop="menuname" label="菜单名称" width="280"></el-table-column>
            <el-table-column prop="requesturl" label="请求地址" width="220"></el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <template v-if="scope.row.pid != '1054'">
                  <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                  <el-button
                    size="mini"
                    type="danger"
                    @click="handleDelete(scope.$index, scope.row)"
                  >删除</el-button>
                </template>
              </template>
            </el-table-column>
          </el-table>
          <!-- <el-pagination
            class="block"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[100, 200, 300, 400]"
            :page-size="100"
            layout="total, sizes, prev, pager, next, jumper"
            :total="400"
          ></el-pagination>-->
        </el-card>
      </el-main>
    </el-container>
    <el-dialog title="新增菜单" :visible.sync="dialogVisible" width="30%">
      <el-form :rules="rules" ref="form" :model="form" label-width="80px">
        <el-form-item label="菜单名称" prop="menuname">
          <el-input v-model="form.menuname"></el-input>
        </el-form-item>
        <el-form-item label="上级菜单">
          <select-tree
            @treeNode="treeNode"
            v-model="form.parentid"
            :options="options"
            :props="defaultProps"
          />
        </el-form-item>
        <el-form-item label="请求地址" prop="requesturl">
          <el-input v-model="form.requesturl"></el-input>
        </el-form-item>
        <!-- <el-form-item label="备注">
          <el-input type="textarea" v-model="form.desc"></el-input>
        </el-form-item>-->
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="saveMenu('form')">确 定</el-button>
        <el-button @click="dialogVisible = false">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
const leftTree = () => import("@/components/leftTree");
const SelectTree = () => import("@/components/SelectTree");
export default {
  data() {
    return {
      height: window.innerHeight - 140,
      heightTab: window.innerHeight - 310,
      formInline: {
        name: "",
      },
      tableData: [],
      currentPage: 1,
      dialogVisible: false,
      form: {
        parentid: "",
        requesturl: "",
        menuname: "",
        menuid: "",
        // desc:""
      },
      defaultProps: {
        parent: "pid", // 父级唯一标识
        value: "pid", // 唯一标识
        label: "menuname", // 标签显示
        children: "children", // 子级
      },
      // 数据列表
      options: [],
      rules: {
        menuname: [
          { required: true, message: "请输入菜单名称", trigger: "blur" },
        ],
        requesturl: [
          { required: true, message: "请输入请求地址", trigger: "blur" },
        ],
      },
      operationType: 0, //0 新增 1编辑
    };
  },
  components: {
    leftTree: leftTree,
    "select-tree": SelectTree,
  },
  methods: {
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },
    handleChange(value) {
      console.log(value);
      console.log(this.form);
    },
    treeNode(data) {
      console.log(data);
    },
    saveMenu(formName) {
      if (this.form["parentid"] == "") {
        this.$message({
          message: "请选择上级菜单",
          type: "error",
        });
        return;
      }
      if ((this.operationType == 0)) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.$ajax.post("/admin/insertmenu", this.form).then((res) => {
              if (res.code == "0") {
                this.$message({
                  message: "添加成功",
                  type: "success",
                });
                this.dialogVisible = false;

                this.getMenu();
              } else {
                this.$message({
                  message: res.msg,
                  type: "error",
                });
              }
            });
          } else {
            console.log("error submit!!");
            return false;
          }
        });
      } else {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.$ajax.post("/admin/updatemenu", this.form).then((res) => {
              if (res.code == "0") {
                this.$message({
                  message: "添加成功",
                  type: "success",
                });
                this.dialogVisible = false;

                this.getMenu();
              } else {
                this.$message({
                  message: res.msg,
                  type: "error",
                });
              }
            });
          } else {
            console.log("error submit!!");
            return false;
          }
        });
      }
    },
    getMenu() {
      this.$ajax.get("/admin/getmenutree").then((res) => {
        this.options = res.data;
        this.tableData = res.data;
      });
    },
    handleEdit(index, row) {
      this.operationType = 1;
      Object.keys(this.form).forEach((el) => {
        this.form[el] = row[el];
      });
      this.form["menuid"] = row.pid;
      this.form["pid"] = row.pid;
      this.dialogVisible = true;
    },
    handleDelete(index, row) {
      this.$confirm("此操作将永久删除该菜单, 是否继续?", "提示", {
        cancelButtonText: "取消",
        confirmButtonText: "确定",
        type: "warning",
      })
        .then(() => {
          this.$ajax.post("/admin/deletemenu", row).then((res) => {
            if (res.code == "0") {
              this.getMenu();
            } else {
              this.$message({
                message: res.msg,
                type: "error",
              });
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    search() {
      let a = this.tableData.filter(
        (item) => item.menuname.indexOf(this.formInline.name) > -1
      );
      console.log(a);
    },
    addDiag() {
      this.operationType = 0;
      this.dialogVisible = true;
      Object.keys(this.form).forEach((el) => {
        this.form[el] = "";
      });
    },
  },
  mounted() {
    this.getMenu();
  },
};
</script>
<style lang="less" scoped>
.block {
  padding: 10px 0;
}
/deep/ .el-card__body {
  padding-bottom: 0;
}
</style>